<template>
	<view class="container">
		<!-- 引入公共头部组件 -->
		<!-- 暂时不删除 后续根据需求操作即可 -->
		<!-- 	<HeaderTitle title="报销" rightTextColor="#1959F9" rightContent="发起报销"
			@selectRightIconChange="selectRightIconChange" :isBack="true" :isSearch="false" :isTab="true"
			:currentIndex="currentIndex" :tabsList="tabsList" @tabOnClickItem="onClickItem" /> -->
		<HeaderTitle title="待办" rightTextColor="#1959F9" rightContent="发起审批"
			@selectRightIconChange="selectRightIconChange" :isBack="true" :isSearch="true" :isTab="true"
			:inputValue="queryParams.Conditions[0].Keyword" :currentIndex="currentIndex" :tabsList="tabsList"
			@tabOnClickItem="onClickItem" @confirm="confirmsearch" @cancel="cancel" />

		<!-- tab切换区域 -->
		<view style="margin-top: 30rpx;">
			<!-- 我的代办 -->
			<HandleList v-if="currentIndex==0" ref="HandleList" :DetpId="childrenDeptId" :parentObj="{ ...this }" />
			<!-- 我发起的 -->
			<MyInitiatedList v-if="currentIndex==1" ref="MyInitiatedList" :DetpId="childrenDeptId" />
			<!-- 我经办的  -->
			<MyHandlingList v-if="currentIndex==2" ref="MyHandlingList" :DetpId="childrenDeptId" />

		</view>

		<!-- 顶部弹出层 -->
		<u-popup class="popup" v-model="showTop" mode="top" :mask='false' border-radius="14">
			<view class="uni-shop-pop">
				<text style="padding: 20rpx;display: inline-block;margin-bottom: 20rpx;">发起审批</text>
				<view class="uni-pop-item" style="">
					<view v-for="(item, index) in ProcessInitiationList" :key="item.Id"
						class="uni-pop-img-text flex column Acenter Jcenter" style="margin-left: 20rpx;"
						@click="urlPagesChange(item.url, item)">
						<image v-if="item.Name ==='日常报销单'" src="../../assets/daily.png" mode=""></image>
						<image v-if="item.Name ==='差旅费报销单'" src="../../assets/travel.png" mode=""></image>
						<image v-if="item.Name ==='工资审批流'" src="../../assets/salary.png" mode=""></image>
						<image v-if="item.Name ==='工资名册审批流'" src="../../assets/slaryApproval.png" mode=""></image>
						<text>{{item.Name}}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		// 获取审批流程管理列表
		Ai_TemplateGetDataList,
	} from '@/api/interface.js'

	// 引入顶部navbar组件
	import HeaderTitle from '@/components/header/header-title.vue'
	// 引用我发起的， 我的代办  我经办的
	import MyInitiatedList from './TabList/MyInitiatedList.vue'
	// 我的代办
	import HandleList from './TabList/HandleList.vue'
	// 我经办的
	import MyHandlingList from './TabList/MyHandlingList.vue'
	export default {
		components: {
			// 公共头部组件
			HeaderTitle,
			// 我发起的
			MyInitiatedList,
			// 我的代办
			HandleList,
			// 我经办的
			MyHandlingList
		},
		data() {
			return {
				// 是否展示顶部弹出层
				showTop: false,
				styleType: 'text', //显示text
				// 标签栏点击的是我的样品还是反馈
				currentIndex: 0,
				tabsList: ['我的待办', '我发起的', '我的经办'],
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},
				pagination: {
					current: 1,
					pageSize: 10,
				},
				// 列表传递参数
				queryParams: {
					Conditions: [{
						condition: "DRKeyWord",
						Keyword: ""
					}]
				},
				// 公司id  负责传递子组件
				childrenDeptId: "",
				// 流程管理列表
				ProcessInitiationList: []
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			var that = this
			if (this.currentIndex == 0) {
				setTimeout(function() {
					that.$refs.HandleList.openForm()
				}, 100)
			} else if (this.currentIndex == 1) {
				setTimeout(function() {
					that.$refs.MyInitiatedList.openForm()
				}, 100)
			} else {
				setTimeout(function() {
					that.$refs.MyHandlingList.openForm()
				}, 100)
			}

			uni.stopPullDownRefresh();
		},
		//上拉加载
		onReachBottom() {
			var that = this
			if (this.currentIndex == 0) {
				this.pagination.current++
				setTimeout(function() {
					if (that.$refs.HandleList.list.length >= that.$refs.HandleList.Total) {
						return
					}
					that.$refs.HandleList.getReachBottom(that.pagination.current)
				}, 100)
			} else if (this.currentIndex == 1) {
				setTimeout(function() {
					if (that.$refs.MyInitiatedList.list.length >= that.$refs.MyInitiatedList.Total) {
						return
					}
					that.$refs.MyInitiatedList.getReachBottom(that.pagination.current)
				}, 100)
			} else {
				setTimeout(function() {
					if (that.$refs.MyHandlingList.list.length >= that.$refs.MyHandlingList.Total) {
						return
					}
					that.$refs.MyHandlingList.getReachBottom(that.pagination.current)
				}, 100)
			}
		},
		onShow() {
			this.childrenDeptId = this.DeptId
			console.log('获取用户信息111111111111111111111111111111111111111', this.UserInfo, this.DeptId, this.childrenDeptId)
			this.getRefreshListData()
			// 获取流程管理列表
			this.getAi_TemplateGetDataList()
		},
		onLoad() {
			console.log('this.HandleList', this.$refs.HandleList)

		},
		computed: {
			...mapState(["UserInfo", "DeptId"]),
		},
		methods: {
			// 刷新列表
			getRefreshListData() {
				if (this.currentIndex == 0) {
					this.$nextTick(function() {
						this.$refs.HandleList.openForm()
					})
				} else if (this.currentIndex == 1) {
					this.$nextTick(function() {
						this.$refs.MyInitiatedList.openForm()
					})

				} else {
					this.$nextTick(function() {
						this.$refs.MyHandlingList.openForm()
					})
				}
			},
			// 搜索确认
			confirmsearch(value) {
				if (this.currentIndex == 0) {
					this.$refs.HandleList.queryParam.keyword = value
					this.$refs.HandleList.openForm()
				} else if (this.currentIndex == 1) {
					this.$refs.MyInitiatedList.queryParam.keyword = value
					this.$refs.MyInitiatedList.openForm()
				} else {
					this.$refs.MyHandlingList.queryParam.keyword = value
					this.$refs.MyHandlingList.openForm()
				}
			},
			// 搜索取消按钮
			cancel() {
				console.log('搜索取消按钮')
				if (this.currentIndex == 0) {
					this.$refs.HandleList.queryParam.keyword = ""
					this.$refs.HandleList.openForm()
				} else if (this.currentIndex == 1) {
					this.$refs.MyInitiatedList.queryParam.keyword = ""
					this.$refs.MyInitiatedList.openForm()
				} else {
					this.$refs.MyHandlingList.queryParam.keyword = ""
					this.$refs.MyHandlingList.openForm()
				}
			},

			// 右侧按钮点击
			selectRightIconChange() {
				console.log('右侧按钮点击了')
				// 弹起顶部弹窗
				this.showTop = true
			},
			// 获取流程管理列表
			getAi_TemplateGetDataList() {
				Ai_TemplateGetDataList({}).then(resJson => {
					if (resJson.Success) {
						resJson.Data.forEach(item => {
							if (item.Name === '日常报销单') {
								item.src = "../../assets/daily.png"
								item.url = "/pages/Approval/DailyFormAdd"
							} else if (item.Name === '差旅费报销单') {
								item.src = "../../assets/travel.png"
								item.url = '/pages/Approval/TravelFormAdd'
							} else if (item.Name === '工资审批流') {
								item.src = "../../assets/salary.png"
								item.url = '/pages/Approval/SalaryApprovalProcessForm'
							} else {
								item.src = "../../assets/slaryApproval.png"
								item.url = '/pages/Approval/SalaryRosterApprovalForm'
							}
						})
						this.ProcessInitiationList = resJson.Data
					}
					console.log('获取流程管理列表', this.ProcessInitiationList)
				})
			},
			// tab切换
			// 我的发起导航栏点击事件
			onClickItem(e) {
				var that = this
				this.currentIndex = e
				console.log('tab切换了', e)
				if (this.currentIndex == 0) {

				} else if (this.currentIndex == 1) {
					// 我发起的
					// 注意**********************88必须加延迟  否则获取不到子组件的refs**********************************************88
					setTimeout(function() {
						console.log('that.$refsMyInitiatedList', that.$refs.MyInitiatedList)
						that.$refs.MyInitiatedList.openForm()
					}, 100)

				} else {
					// 我经办的
					// 注意**********************88必须加延迟  否则获取不到子组件的refs**********************************************88
					setTimeout(function() {
						console.log('that.$refsMyInitiatedList', that.$refs.MyInitiatedList)
						that.$refs.MyHandlingList.openForm()
					}, 100)

				}
			},
			// 新曾报销单
			urlPagesChange(url, item) {
				// 隐藏顶部弹窗
				this.showTop = false
				uni.navigateTo({
					url: item.url + '?TemplateId=' + item.Id
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	// 覆盖uview弹窗的背景  注意必须用::v-deep深度修改  不饿能用v-deep  不生效*************************************
	::v-deep.u-drawer-top {
		background-color: rgba(0, 0, 0, 0.7) !important;
	}

	.container {

		// 弹窗区域
		.uni-shop-pop {
			// background-color: #464646;
			padding-top: 50rpx;

			text {

				&:first-child {
					font-size: 34rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}

			.uni-pop-item {
				display: flex;

				.uni-pop-img-text {
					width: 160rpx;
					height: 150rpx;
					margin-bottom: 18rpx;
					background: rgba(0, 0, 0, 0.8);
					border-radius: 10rpx;

					image {
						width: 55rpx;
						height: 55rpx;
					}

					text {
						font-size: 24rpx;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 40rpx;
					}
				}
			}
		}
	}
</style>